<template>
  <div class="track-list">
    <el-empty v-if="trackActivities.length === 0" description="暂无轨迹记录">
      <el-text type="info">请添加第一条轨迹记录</el-text>
    </el-empty>

    <div v-else class="timeline-container">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in trackActivities"
          :key="activity.id || index"
          :type="activity.type as 'primary' | 'success' | 'warning' | 'danger' | 'info'"
          :color="activity.color"
          :timestamp="formatTimestamp(activity.timestamp)"
          placement="top"
          :hollow="index !== 0"
          :size="index === 0 ? 'large' : 'normal'"
        >
          <el-card 
            :class="['track-item', { latest: index === 0 }]"
            shadow="hover"
          >
            <div class="track-content">
              <div class="track-header">
                <div class="track-info">
                  <el-tag 
                    :type="activity.type as 'primary' | 'success' | 'warning' | 'danger' | 'info'"
                    size="small"
                    effect="dark"
                  >
                    {{ getStatusText(activity.status) }}
                  </el-tag>
                  <span class="time-ago">{{ getTimeAgo(activity.timestamp) }}</span>
                </div>
                
                <div class="track-actions">
                  <el-tag size="small" type="info">
                    轨迹记录
                  </el-tag>
                </div>
              </div>

              <div class="track-details">
                <!-- 显示轨迹描述（从API返回的description字段） -->
                <div class="detail-row main-description">
                  <el-icon class="detail-icon"><Document /></el-icon>
                  <span class="detail-text">{{ activity.content }}</span>
                </div>
                
                <div class="detail-row">
                  <el-icon class="detail-icon"><Location /></el-icon>
                  <span class="detail-text">{{ activity.location }}</span>
                </div>
                
                <div v-if="activity.operator" class="detail-row">
                  <el-icon class="detail-icon"><User /></el-icon>
                  <span class="detail-text">操作员：{{ activity.operator }}</span>
                </div>
                
                <div v-if="activity.remark" class="detail-row">
                  <el-icon class="detail-icon"><Document /></el-icon>
                  <span class="detail-text remark">备注：{{ activity.remark }}</span>
                </div>
                
                <div v-if="activity.coordinates && activity.coordinates[0] !== 0" class="detail-row coordinates">
                  <el-icon class="detail-icon"><Position /></el-icon>
                  <span class="detail-text">
                    {{ formatCoordinates(activity.coordinates) }}
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- 移除编辑功能，配送员不能修改已有轨迹 -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Location, User, Document, Position } from '@element-plus/icons-vue'

interface TrackActivity {
  id?: string
  content: string
  timestamp: string
  type: string
  color: string
  location: string
  operator?: string
  remark?: string
  status: number
  coordinates?: [number, number]
}

interface Props {
  trackActivities: TrackActivity[]
}

interface Emits {
  // 移除编辑和删除功能
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 状态映射（与接口文档保持一致）
const statusMap = {
  1: { text: '已下单', type: 'info' },
  2: { text: '待揽件', type: 'primary' },
  3: { text: '已揽件', type: 'primary' },
      4: { text: '运输中', type: 'warning' },
  5: { text: '已到达', type: 'warning' },
  6: { text: '已签收', type: 'success' }
}

const getStatusText = (status: number): string => {
  return statusMap[status as keyof typeof statusMap]?.text || '未知状态'
}

const formatTimestamp = (timestamp: string): string => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const getTimeAgo = (timestamp: string): string => {
  const now = new Date()
  const date = new Date(timestamp)
  const diff = now.getTime() - date.getTime()
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days > 0) return `${days}天前`
  if (hours > 0) return `${hours}小时前`
  if (minutes > 0) return `${minutes}分钟前`
  return '刚刚'
}

const formatCoordinates = (coordinates: [number, number]): string => {
  return `坐标：${coordinates[0].toFixed(6)}, ${coordinates[1].toFixed(6)}`
}

// 移除编辑和删除相关方法
</script>

<style scoped>
.track-list {
  max-height: 600px;
  overflow-y: auto;
}

.timeline-container {
  padding: 0;
}

.track-item {
  margin-bottom: 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.track-item.latest {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.track-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.track-content {
  padding: 16px;
}

.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.track-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-ago {
  font-size: 12px;
  color: #64748b;
}

.track-actions {
  display: flex;
  gap: 8px;
}

.track-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.detail-icon {
  font-size: 16px;
  color: #94a3b8;
  flex-shrink: 0;
}

.detail-text {
  flex: 1;
  line-height: 1.4;
}

.detail-row.main-description .detail-text {
  font-weight: 500;
  color: #374151;
  font-size: 15px;
}

.detail-row.remark .detail-text {
  color: #6b7280;
  font-style: italic;
}

.detail-row.coordinates .detail-text {
  font-family: monospace;
  font-size: 12px;
  color: #9ca3af;
}

.track-list::-webkit-scrollbar {
  width: 6px;
}

.track-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.track-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.track-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

@media (max-width: 768px) {
  .track-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .track-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .detail-row {
    flex-wrap: wrap;
  }
}
</style> 